import ProForm, {
  DrawerForm,
  ProFormRadio,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { Button, Divider, Typography } from 'antd';
import Link from 'antd/es/typography/Link';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

import React from 'react';

interface AddAttachmentLinkProps {
  onRefurbish: (Attachment: AssessRecordBo.Attachment) => void;
}

const AddAttachmentLink: React.FC<AddAttachmentLinkProps> = ({ onRefurbish }) => {
  const config = {
    logo: 'assets/promotion_icon_douyin.png',
    type: 3,
    typeName: '口令',
  };

  return (
    <DrawerForm
      key="add_promotion_task_drawer_form_douyin"
      title={
        <div
          style={{
            display: 'flex',
          }}
        >
          <img
            width={22.4}
            style={{
              margin: 'auto 2px',
            }}
            src={config.logo}
          />
          新建 - {config.typeName}
        </div>
      }
      drawerProps={{
        maskClosable: false,
        destroyOnClose: true,
      }}
      trigger={<Button>{config.typeName}</Button>}
      onVisibleChange={(visible: boolean) => {}}
      initialValues={{
        isDemandClipboard: 1,
      }}
      onFinish={async (values) => {
        let attachment = { ...values } as AssessRecordBo.Attachment;
        attachment.id = dayjs().valueOf().toString();
        attachment.type = 3;

        onRefurbish(attachment);
        return true;
      }}
    >
      <ProForm.Group>
        <ProFormText
          width="xl"
          name="name"
          label="标题"
          rules={[{ required: true, message: '请输入标题' }]}
          fieldProps={{
            allowClear: true,
            maxLength: 200,
          }}
        />

        <ProFormTextArea
          width="xl"
          name="signal"
          label="分享口令"
          fieldProps={{
            allowClear: true,
            rows: 3,
            maxLength: 1000,
          }}
          rules={[{ required: true, message: '请输入分享口令' }]}
        />
        <Typography.Paragraph>
          获取分享口令和链接需要登录
          <Link target="_blank" href="https://www.douyin.com/">
            抖音
          </Link>
          ，在视频窗口右侧分享按钮弹窗中复制。
        </Typography.Paragraph>
      </ProForm.Group>
      <Divider />
    </DrawerForm>
  );
};
export default AddAttachmentLink;
